import { Suspense } from "react"
import type { Metadata } from "next"
import { Separator } from "@/components/ui/separator"
import { SongCard } from "@/components/song-card"
import { getUserLikedSongs } from "@/lib/api-client"
import type { Song } from "@/types/song"

export const metadata: Metadata = {
    title: "My Liked Songs",
    description: "View all your liked songs.",
}

async function getLikedSongs() {
    try {
        // In a real app, we would get the current user's ID from the session
        const userId = "1" // Mock user ID
        const response = await getUserLikedSongs({ userId, limit: 100 })
        return response.data
    } catch (error) {
        console.error("Error fetching liked songs:", error)
        return []
    }
}

export default async function MyLikedSongsPage() {
    const likedSongs = await getLikedSongs()

    return (
        <div className="container py-6">
            <h1 className="text-2xl font-bold">My Liked Songs</h1>
            <Separator className="my-4" />
            <div className="space-y-1">
                <Suspense fallback={<div>Loading songs...</div>}>
                    {likedSongs.length > 0 ? (
                        likedSongs.map((song: Song) => <SongCard key={song.id} song={song} />)
                    ) : (
                        <div className="py-8 text-center text-muted-foreground">You haven't liked any songs yet.</div>
                    )}
                </Suspense>
            </div>
        </div>
    )
}

